<template>
  <FormProvider :form="addForm">
    <!--style="margin-left: 50px;margin-right: 35px"-->
    <SchemaField :schema="schema" />
  </FormProvider>
</template>

<script>
import XEUtils from 'xe-utils'
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider, Schema } from '@formily/vue'
import { FormGrid, FormItem, Input, InputNumber, DatePicker } from '@formily/antdv'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    FormGrid,
    Input,
    InputNumber,
    DatePicker
  }
})
export default {
  name: 'JsonAdd',
  components: {
    FormProvider,
    SchemaField
  },

  props: {
    fieldProp: {
      type: Object,
      default: () => {
        return {}
      },
      require: false
    }
  },
  created() {
    Schema.registerTypeDefaultComponents({
      string: 'Input',
      number: 'InputNumber',
      date: 'DatePicker'
    })
    Schema.enablePolyfills(['1.0'])
  },
  data () {
    return {
      addForm: createForm({
        validateFirst: true
      }),
      schema: {
        type: 'object',
        properties: {
          grid: {
            type: 'void',
            'x-component': 'FormGrid',
            'x-component-props': {
              minColumns: 2,
              maxColumns: 2,
              columnGap: 10
            },
            properties: this.fieldProp
          }
        }
      }
    }
  },
  methods: {
    propIsEmpty() {
      return !XEUtils.isEmpty(this.schema.properties.grid.properties)
    },
    getAddForm() {
      return this.addForm
    }
  }

}
</script>

<style scoped>

</style>
